<template>
	<view class="MarketList plr-16">
		<view class="item" v-for="item in list" :key="item.id" @click="$u.route('/pages/market/detail',{id:item.id})">
			<view class="flex-center-sb">
				<view class="flex flex-ai-center">
					<view class="font-w-500">{{ product.name }}</view>
					<view v-if="item.status != 1" class="sdz-box flex flex-ai-center flex-js-center">
						<w-icon name="sock" size="10"></w-icon>
						<view class="ml-2">锁单中</view>
					</view>
				</view>
				<view class="flex-center">
					<text class="price mr-4">{{ item.price }}</text>
					<w-icon name="arrow-right-mini" size="12"></w-icon>
				</view>
			</view>
			<view class="flex-center-sb ">
				<view class="font-w-600 font-size-16" style="letter-spacing: 3rpx;">#{{ item.collection_code }}</view>
				<view class="flex-center">
					<text class="font-size-12">支付钱包：</text>
					<view class="flex gap-4" v-if="item.income_type">
					    <view class="font-size-10 font-color-666 plr-3 ptb-1 br-4" style="background-color: #EEEEEE" v-for="items in item.income_type" :key="items">
					        {{ items | formatPayName }}
					    </view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="flex-center ptb-20" v-if="loadingType == 'empty'">
		    <w-image src="/static/bg/market-out.png" width="159" mode="widthFix"></w-image>
		</view> -->
		<w-loading style="padding: 32rpx 0" :type="loadingType" emptyType="market"></w-loading>
		
		<BatchConfirm :product="product" v-model="showBatch" />
		
		<u-popup :show="showCreate" mode="bottom" :closeOnClickOverlay="true" @close="showCreate = false" :round="12" :safeAreaInsetBottom="false" bgColor="transparent">
		    <view class="plr-16 pt-16 pick-pay br-t-12">
		        <view class="title flex flex-ai-center">
		            <view class="flex-1"></view>
		            <text class="flex-1 font-color-textPrimary font-w-600">选择支付方式</text>
		        </view>
		        <view class="flex flex-js-sb mlr-8 ptb-12" v-for="item in basePayList" :key="item.icon" style="border-bottom: 1px solid rgba(255, 255, 255, 0.2)" @click="checkFn(item)">
		            <view class="flex flex-ai-center">
		                <w-icon size="18" :name="item.icon"></w-icon>
		                <text class="ml-8" :class="item.able && item.check ? 'font-color-textPrimary' : 'font-color-999'">{{ item.name }}</text>
		            </view>
		            <w-icon v-if="item.able && item.check" name="check-icon" size="18"></w-icon>
		            <w-button v-if="!item.able" size="mm" shape="circle" :disabled="!userInfo.real_name_authentication" @click="$u.route('/pages/wallet/wallet')">去开通</w-button>
		        </view>
		        <w-button class="mt-30" shape="circle" :disabled="disable" @click="checkCaptcha">确认</w-button>
		    </view>
		</u-popup>
		 <w-jy-verify ref="captcha" v-if="captchaStatus" @success="fastCreate"></w-jy-verify>
		
		<view class="fix-btn bg-color-white">
			<view class="flex-center-sb w-100">
				<w-button  class="w-100 br-24" style="font-weight: bold;" @click="piliangCreateOrder">批量购买</w-button>
				<!-- <w-button style="width: 328rpx;" @click="showCreate = true">快捷下单</w-button> -->
			</view>
			<!-- <u-status-bar></u-status-bar> -->
		</view>
	</view>
</template>

<script>
	import { basePayList } from "@/config/index.js";
	import BatchConfirm from "./batchConfirm.vue";
	import { mapActions, mapState } from "vuex";
	import { fastCreateOrder } from "@/api/order/index.js";
	import PayUtil from "@/utils/payUtil.js";
	export default {
		name:'MarketList',
		props: {
			product: {
				type: Object,
				default: () => ({})
			},
			list: {
				type: Array,
				default: () => []
			},
			loadingType: {
				type: String,
				default: 'more'
			},
			goodsType:{
				type: [String,Number],
				default: ''
			}
		},
		filters: {
		    formatPayName(v) {
		        let map = {
		            huifu: "A",
		            yibao: "易",
		        };
		        return map[v];
		    },
		},
		computed:{
			disable() {
			    return !this.basePayList.map((v) => v.check).includes(true);
			},
			...mapState("config", {
			    captchaStatus(state) {
			        return !!Number(state.info.fastOrder_check);
			    },
			})
		},
		components: {
			BatchConfirm
		},
		data() {
			return {
				basePayList,
				showBatch: false,
				showCreate: false,
				showCreate: false,
			}
		},
		mounted() {
			this.payTypeInit();
		},
		methods:{
			//批量下单
			piliangCreateOrder(){
				// this.showBatch = true
				uni.navigateTo({
					url:`/pages/market/batchCreateOrder?id=${this.product.id}&goodsType=${this.goodsType}`
				})
			},
			//初始化支付
			payTypeInit() {
			    this.basePayList = this.basePayList.map((v) => {
			        v.able = this.userInfo[v.auth_key];
			        v.check = v.able && v.pay_way == this.appConfig.default_pay_type;
			        return v;
			    });
			},
			checkCaptcha() {
			    if (this.captchaStatus) {
			        this.showCreate = false;
			        this.$refs.captcha.showCaptcha();
			    } else {
			        this.fastCreate();
			    }
			},
			//快捷下单
			fastCreate(validate) {
			    fastCreateOrder({
			        goods_id: this.product.id,
			        key: this.product.key,
			        pay_way: this.basePayList.find((v) => v.check).pay_way,
			        ...validate,
			    }).then((res) => {
			        new PayUtil({
			            pay_type: 4,
			            order_number: res.data.order_sn,
			            order_type: 2,
			            pay_way: this.basePayList.find((v) => v.check).pay_way,
			            order_id: res.data.order_id,
			        });
			    });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.MarketList {
		>.item{
			padding: 12rpx 0;
			border-bottom: 2rpx solid #eee;
			.sdz-box {
				width: 90rpx;
				height: 38rpx;
				background: #00FFAB;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-left: 32rpx;
				font-family: OPPO Sans 4.0, OPPO Sans 40;
				font-weight: 400;
				font-size: 18rpx;
				color: #1E1E1E;
			}
		}
		.price {
			font-size: 40rpx;
			color: #000;
			font-weight: bold;
			&:before{
				content: '¥';
				font-size: 32rpx;
				margin-right: 2rpx;
			}
		}
		
		.fix-btn {
			width: 100%;
			padding: 20rpx 32rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			box-shadow: 0px -2px 28px 0px rgba(0,0,0,0.06);
			padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		}
		
		.pick-pay {
		    background: $item-bg-color;
		    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		}
	}
</style>
